<template>
  <view class="container">
    <u-form :model="form" ref="form">
      <u-form-item label="姓名" prop="idCardName" :required="rules.idCardName[0].required">
        <u-input v-model="form.idCardName" placeholder="请输入姓名"/>
      </u-form-item>
      <u-form-item label="身份证" prop="idCard" :required="rules.idCard[0].required">
        <u-input v-model="form.idCard" placeholder="请输入身份证" />
      </u-form-item>
    </u-form>
    <u-button type="primary" shape="square" :ripple="true" size="default" :disabled="lockBtn" @click="submit">验证身份</u-button>
  </view>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "SimpleLogin",
  data(){
    return {
      lockBtn: false,
      form: {
        idCardName: '',
        idCard: ''
      },
      rules: {
        idCardName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: ['change','blur'],
          }
        ],
        idCard: [
          {
            required: true,
            message: '请输入身份证',
            trigger: ['change','blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.idCard(value);
            },
            message: "身份证号码不正确",
            trigger: ["change", "blur"],
          },
        ]
      }
    }
  },
  computed: {
    ...mapGetters(["openId"]),
  },
  methods: {
    async submit() {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return
        }
        try {
          this.lockBtn = true
          let {code, data, msg} = await this.$api.affiliate.unionLogin({
            idCardName: this.form.idCardName,
            idCardNo: this.form.idCard,
            openId: this.openId,
          })
          if (code === 200) {
            uni.setStorageSync("token", data.token);
            uni.navigateBack({delta: 1})
          }
        } finally {
          this.lockBtn = false
        }
      })
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}
</style>
